<template>
  <div class="login-wrapper">
    <div class="login-container">
      <div class="login-form">
        <div class="form-warp">
          <LoginForm />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex';
  import LoginForm from 'views/login/comp/LoginForm.vue';
  import { useI18n } from 'vue-i18n';

  const store = useStore();
  const { t } = useI18n();
</script>

<style lang="scss" scoped>
  .login-wrapper {
    position: relative;
    .login-container {
      display: flex;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: url('@/assets/login-bg.png') top center no-repeat #1b2026;
      background-size: contain;
      .login-form {
        display: flex;
        align-items: top;
        justify-content: center;
        width: 50vw;
        height: 100vh;
        .form-warp {
          width: 380px;
          height: 580px;
          padding: 80px 40px;
          background-color: #fff;
          box-shadow: 0px 8px 9px 0px rgba(0, 0, 0, 0.37);
        }
      }
    }
  }
</style>
